<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>注册 | 漫迷客</title>
<link rel="stylesheet" href="static/css/css.css">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/all.min.css">
<link rel="stylesheet" href="static/css/styles1.css">
<link rel="stylesheet" href="static/css/color-switcher.min.css">
<link rel="stylesheet" href="static/css/preloader.min.css">
	<link rel="stylesheet" href="static/css/QVerify.min.css">
			<link rel="stylesheet" href="static/css/xiaoxi.css">
</head>
<body>

<div id="preloader-wrapper">
<div id="loading-layer">
<div class="loading">
<div class="rect-one"></div>
<div class="rect-two"></div>
<div class="rect-three"></div>
<div class="rect-four"></div>
<div class="rect-five"></div>
</div>
</div>
</div>




<div class="d-flex justify-content-center swish-wrapper text-center" id="auth-page">
<div class="container-fluid form-container shadow rounded my-auto">
<div class="row h-100">

<div class="col-md-7 form-box bg-white rounded-left">
<div class="d-flex flex-column sign-in-container h-100">
<div class="align-items-center sign-in mx-auto my-auto px-4">


<div class="py-3">
<a class="logo-link" href="login6.html">
<img class="logo-image" alt="Logo" src="static/picture/logo.png">
</a>
</div>
<h3 class="text-neutral font-weight-bold py-1">欢迎注册XX账户</h3>
<p class="text-main">创建新账号，代表您已经同意我们的条款条例</p>


<form class="sign-in-form box-rounded" method="get" action="zhuceyanzheng.php">
<div class="form-group mt-3">
<input class="form-control form-control-lg box-rounded" type="text" id="username" placeholder="用户名" name="username" required="">
</div>
<div class="form-group mt-2">
<input class="form-control form-control-lg box-rounded" type="email" id="mail" placeholder="邮箱" name="mail" required="">
</div>
<div class="form-group">
<input class="form-control form-control-lg box-rounded" type="password" id="password" required="" name="password" placeholder="密码">
</div>

<div class="form-row text-nowrap d-flex my-4">
<div class="col d-flex align-items-center">
<div class="form-check">
<a class="text-neutral font-weight-bold" href="login6.html">已经有账号了？点击登录</a>
</div>
</div>

</div>
<div id="QVerify" style="visibility: hidden"></div>
<div class="d-flex">
<button class="btn btn-main mr-4 col shadow-sm box-rounded text-600" id="color" type="button" onclick="test3();">人机验证</button>
<a class="col btn btn-outline-main btn-link btn-lg shadow-sm box-rounded text-600"   onclick="test2();">注册</a>
</div>
</form>

</div>
</div>
</div>


<div class="col-md-5 overlay-box bg-white rounded-right d-none d-md-block">
<div class="overlay-background mx-auto rounded-right" ></div>
</div>

</div>
</div>
</div>
<script src="static/js/coco-message.js"></script>
    <script>
    

      function example(n) {
        switch (n) {
          case 0:
            cocoMessage.info(3000, "请先进行人机验证！", function () {
              console.log("close");
            });
            break;

          case 1:
            var div1 = document.createElement("div");
            div1.innerText = "修改成功！";
            cocoMessage.success(div1);
            break;

          case 2:
            cocoMessage.warning("需要手动关闭", 0);
            break;

          case 3:
            cocoMessage.error("请先输入账号密码！", 3000);
            break;

          case 4:
            var closeMsg = cocoMessage.loading(true);
            setTimeout(function () {
              closeMsg();
            }, 4000);
            break;

          case 5:
            cocoMessage.destroyAll();
            break;

          default:
            break;
        }
      }
    </script>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/color-switcher.min.js"></script>
<script src="static/js/preloader.min.js"></script>
 <script src="js/jquery.min.js"></script>
    <script src="js/script.js"></script>
	<script type="text/javascript" src="static/js/QVerify.min.js"></script>
<script type="text/javascript">
var ok=0;

	function test () {
		QVerify({
			name: "人机验证",  // 验证面板标题
			desc: "滑动滑块，使图片显示角度为正",  // 验证操作提示文字
			cloneTxt: "点我关闭",  // 关闭验证面板文字
			successTxt: "验证成功，{0}秒后自动关闭",  // {0}必须有，延迟关闭时间显示
			errorTxt: "验证失败，请重试",
			images: [
				"static/image/111.webp"
			],  // 图片数组 将会随机从里面选取一张
			duration: 1,  //定时关闭时间 默认 2
			mountDiv: "#QVerify",  // 装载div 默认 #QVerify
			slideDifference: 10,  // 滑动误差值 默认 5
			defaultDifference: 50,  // 默认图片角度最小差值 默认 50
			mousedown: function (e) {  // 按下鼠标事件
				// e: 元素本身
				console.log('按下了鼠标');
			},
			mousemove: function (e, moveWidth) {  // 移动鼠标事件
				// e: 元素本身
				// moveWidth: 移动距离
				console.log("移动了鼠标");
				console.log(moveWidth);
			},
			mouseup: function (e, moveWidth) {  // 抬起鼠标事件
				// e: 元素本身
				// moveWidth: 移动距离
				console.log("抬起了鼠标");
				console.log(moveWidth);
			},
			
			success: function () {  // 验证成功事件
				console.log("验证成功");
				ok=1;
				document.getElementById("color").style.background="#00bf50";
				document.getElementById("color").innerHTML="验证完成";
			},
			fail: function () {  // 验证失败事件
				console.log("验证失败");
				
			},
			complete: function () {  // 验证完成事件 成功失败都会执行(执行顺序: complete->success 或 complete->fail)
				console.log("触发验证");
			},
			clone: function (status) {  // 关闭验证面板事件
				// status 返回的状态
				// false: 失败状态下关闭; true: 成功状态下关闭;
				console.log(status);
				
			}
		});
	};
	function test2 () {
	if(ok==0){
		console.log("请先进行人机验证");
		example(0);
	}else{
	    	var username = document.getElementById("username").value;
					var password = document.getElementById("password").value;
						var mail = document.getElementById("mail").value;
					location.href='youjian.php?username='+username+'&password='+password+'&mail='+mail;
	    
	    
	}
	
	}
		function test3 () {
		    if(ok!=1){ 
	if(document.getElementById("username").value=="" || document.getElementById("username").value=="" ||document.getElementById("mail").value==""  ){
		console.log("请先输入账号或密码");
		example(3);
	}else{
	    console.log("账号密码已经输入");
	   test(); 
	    
	
	}
	
	}
		}
</script>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/color-switcher.min.js"></script>
<script src="static/js/preloader.min.js"></script>
</body>
</html>
